<!--
 * @Description: js+echats
 * @Author: rendc
 * @Date: 2025-05-15 11:02:51
 * @LastEditors: rendc
 * @LastEditTime: 2025-05-16 09:45:47
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>js+echats</title>
</head>
<!-- 引入echarts资源 网络资源 -->
<!-- <script src="https://cdn.jsdelivr.net/npm/echarts@5.6.0/dist/echarts.min.js"></script> -->
<!-- <script src="https://cdn.jsdelivr.net/npm/echarts@5.6.0/dist/echarts.js"></script> -->
<!-- 引入echarts资源 本地资源 压缩版本的资源-->
<!-- <script src="echarts.min.js"></script> -->
<!-- 引入echarts资源 本地资源 完整版的资源-->
<!-- <script src="echarts.js"></script> -->
<!-- 引入自定义的echarts资源 本地资源 自定义版未压缩的资源-->
<script src="echarts.diy.js"></script>
<!-- 引入自定义的echarts资源 本地资源 自定义版压缩的资源-->
<!-- <script src="echarts.diy.min.js"></script> -->
<style>
  #main,
  #main2 {
    border: 2px solid skyblue;
    width: 600px;
    height: 400px;
  }
</style>

<body>
  <!-- 为 ECharts 准备一个定义了宽高的 DIV -->
  <div id="main"></div>
  <div id="main2"></div>
</body>
<script>
  // js中声明变量的关键字 let var const(常量)
  // 获取div元素
  var divMain = document.getElementById("main");
  // 基于准备好的dom，初始化echarts实例，默认主题是明亮色的 
  // echarts.init(dom, 'dark'); 深色主题
  var myChart = echarts.init(divMain); // 明亮主题
  // var myChart = echarts.init(divMain, 'dark'); // 深色主题
  // 指定图表的配置项和数据
  var option = {
    // 全局调色盘。
    // color: [
    //   '#c23531',
    //   '#2f4554',
    //   '#61a0a8',
    //   '#d48265',
    //   '#91c7ae',
    //   '#749f83',
    //   '#ca8622',
    //   '#bda29a',
    //   '#6e7074',
    //   '#546570',
    //   '#c4ccd3'
    // ],
    title: {
      text: 'ECharts 柱状图&折线图'
    },
    tooltip: {},
    legend: {
      // orient: 'vertical',
      // right: 10,
      // top: 'center',
      data: ['销量', '销售额']
    },
    xAxis: {
      data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    yAxis: {},
    series: [{
        name: '销量',
        // 此系列自己的调色盘。
        // color: [
        //   '#dd6b66',
        //   '#759aa0',
        //   '#e69d87',
        //   '#8dc1a9',
        //   '#ea7e53',
        //   '#eedd78',
        //   '#73a373',
        //   '#73b9bc',
        //   '#7289ab',
        //   '#91ca8c',
        //   '#f49f42'
        // ],
        type: 'bar', // 图表类型 柱状图
        data: [5, 20, 36, 10, 10, 20]
      },
      {
        name: '销售额',
        // 此系列自己的调色盘。
        // color: [
        //   // '#c23531',
        //   '#2f4554',
        //   '#61a0a8',
        //   '#d48265',
        //   '#91c7ae',
        //   '#749f83',
        //   '#ca8622',
        //   '#bda29a',
        //   '#6e7074',
        //   '#546570',
        //   '#c4ccd3'
        // ],
        type: 'line', // 图表类型 折线图
        data: [15, 120, 316, 110, 110, 210]
      },
    ]
  };
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
  // 第二个图 饼图
  // 获取div元素
  var divMain2 = document.getElementById("main2");
  // 基于准备好的dom，初始化echarts实例，默认主题是明亮色的 
  // echarts.init(dom, 'dark'); 深色主题
  var myChart2 = echarts.init(divMain2); // 明亮主题
  // var myChart2 = echarts.init(divMain, 'dark'); // 深色主题
  // 指定图表的配置项和数据
  var option2 = {
    title: {
      text: 'ECharts 饼图'
    },
    tooltip: {},
    legend: {
      // orient: 'vertical',
      // right: 10,
      // top: 'center',
      // data: ['销售额']
    },
    series: [{
      name: '销售额',
      // 此系列自己的调色盘。
      color: [
        // '#c23531',
        '#2f4554',
        '#61a0a8',
        '#d48265',
        '#91c7ae',
        '#749f83',
        '#ca8622',
        '#bda29a',
        '#6e7074',
        '#546570',
        '#c4ccd3'
      ],
      type: 'pie', // 图表类型 折线图
      data: [{
          value: 335,
          name: '直接访问'
        },
        {
          value: 234,
          name: '联盟广告'
        },
        {
          value: 1548,
          name: '搜索引擎'
        }
      ]
    }, ]
  };
  // 使用刚指定的配置项和数据显示图表。
  myChart2.setOption(option2);
</script>

</html>